<template>
	<v-content ref="content" single flex padding-top="30" background="#ffad01">
		<div class="header padding">
			<div class="item" @click="onBack">
				<image class="image" src="/static/image/exam/icon-back.png"></image>退出考试
			</div>
			<div class="item">
				剩余时间:
				<u-count-down ref="countDown" :time="examTime" format="HH:mm:s" @change="onCountDownChange">
					<view class="time">
						<view>
							<text>
								{{ nowCountDown.hours >= 10 ? nowCountDown.hours : "0" + nowCountDown.hours }}
							</text>
						</view>
						<text>:</text>
						<view>
							<text>
								{{ nowCountDown.minutes >= 10 ? nowCountDown.minutes : "0" + nowCountDown.minutes }}
							</text>
						</view>
						<text>:</text>
						<view>
							<text>
								{{ nowCountDown.seconds >= 10 ? nowCountDown.seconds : "0" + nowCountDown.seconds }}
							</text>
						</view>
					</view>
				</u-count-down>
				<div class="number">{{ current }}/{{ questionLength }}</div>
			</div>
		</div>

		<div class="main padding">
			<div class="number">
				<div class="span">{{ current }}</div>
				/{{ questionLength }}
			</div>
			<TestQuestion v-model="answer" @on-change="onSaveAnswer"></TestQuestion>
		</div>

		<div class="footer">
			<div class="button" key="prev" @click="toPrev" v-if="current != 1">上一题</div>
			<div class="button" key="plac" v-else></div>
			<div class="button" key="next" @click="toNext" v-if="current == questionLength">提交试卷</div>
			<div class="button" key="end" @click="toNext" v-else>下一题</div>

			<div class="answer-card" @click="onShowAnswerCard">
				<image class="image" src="/static/image/exam/answer-card.png"></image>
				答题卡
			</div>
		</div>
		<v-popup ref="vPopup" round round-size="20" :closeable="false">
			<div class="popup-answer-card">
				<answer-card ref="AnswerCardRef" type="question" @on-click="onHideAnswerPopup"></answer-card>
			</div>
		</v-popup>
	</v-content>
</template>

<script>
import mixins from "@/mixins"
import TestQuestion from "./components/question.vue"
import answerCard from "./components/answer-card.vue"

export default {
	name: "answer",
	mixins: [mixins],
	data() {
		return {
			nowCountDown: {},

			startTime: new Date().getTime(),
		}
	},
	computed: {
		message() {
			return this.$store.state.exam.message
		},
		questionLength() {
			return this.$store.getters["exam/questionLength"]
		},
		current: {
			get() {
				return this.$store.state.exam.current + 1
			},
			set(value) {
				this.$store.commit("exam/setCurrent", value - 1)
			},
		},
		answers() {
			return this.$store.getters["exam/answer"]
		},
		answer: {
			get() {
				return this.$store.getters["exam/nowAnswer"]
			},
			set(value) {
				this.$store.commit("exam/setAnswer", { answer: value, index: this.current - 1 })
			},
		},

		examTime() {
			return this.message.examTime * 60 * 1000 - +this.message.timeConsuming
		},

		isAnswerAll() {
			return this.answers.every(item => (item ? item.length : false))
		},
	},
	methods: {
		async init() {
			if (!this.message.id) {
				const data = await this.$store.dispatch("exam/isHasExam", this.query.id)

				if (data) {
					this.$store.dispatch("exam/getExam", {
						id: this.query.id,
					})
				} else {
					this.$store.dispatch("exam/getExam", {
						id: this.query.id,
						type: "set",
						save: true,
					})
				}
			}
		},

		onBack() {
			this.showMessage.modal({
				title: "提示",
				content: "退出将会中断考试, 确认退出吗 ?",
				// cancelText: "取消",
				// confirmText: "确定",
				confirm: next => {
					next()
					this.toPage(-1)
				},
			})
			return true
		},

		toPrev() {
			if (this.current <= 1) {
				this.showMessage.modal({
					title: "温馨提示",
					content: "已经是第一题了",
					confirm: next => {
						next()
					},
				})
				return
			}
			this.current--
		},
		toNext() {
			if (this.current >= this.questionLength) {
				this.showMessage.modal({
					title: "温馨提示",
					content: this.isAnswerAll ? "已经是最后一题了, 请提交试卷" : "您还有试题未答, 是否提交试卷",
					confirm: async (next, cancel) => {
						try {
							await this.onEnd()
							next()
						} catch (error) {
							cancel()
						}
					},
				})
				return
			}
			this.current++
		},

		onCountDownChange(e) {
			this.nowCountDown = e
			if (e.days + e.hours + e.milliseconds + e.minutes + e.seconds == 0) {
				this.onCountDownEnd()
			}
		},
		onCountDownEnd() {
			this.showMessage.modal({
				title: "温馨提示",
				content: "很遗憾~~答题已超时，请提交试卷",
				showCancel: false,
				confirm: async (next, cancel) => {
					try {
						await this.onEnd()
						next()
					} catch (error) {
						cancel()
					}
				},
			})
		},
		onShowAnswerCard() {
			this.$refs.vPopup.show()
			this.$nextTick(() => {
				this.$refs.AnswerCardRef.updateList()
			})
		},
		onHideAnswerPopup() {
			this.$refs.vPopup.hide()
		},

		async onEnd() {
			let timeConsuming = ((new Date().getTime() - this.startTime) / 1000) | 0

			if (timeConsuming > this.message.examTime * 60) {
				timeConsuming = this.message.examTime * 60
			}

			const data = await this.$axios.post("/api/study/exam/studyExam/saveMemberExam", {
				examId: this.message.id,
				examName: this.message.examName,
				timeConsuming,
				examQuestionDTOList: this.$store.getters["exam/questionList"].map(item => {
					return {
						...item,
						examQuestionId: item.questionId,
					}
				}),
			})
			// this.toPage(-2)
			this.toPage(
				"/pages/exam/result",
				{
					id: data.id,
				},
				"replace"
			)
		},
		onSaveAnswer() {
			this.$store.dispatch("exam/saveAnswer", {
				index: this.current - 1,
			})
		},
	},
	components: {
		TestQuestion,
		answerCard,
	},
}
</script>

<style lang="scss" scoped>
.header {
	color: #fff;
	.item {
		font-size: 26rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-bottom: 14rpx;
		.image {
			width: 27rpx;
			height: 34rpx;
			margin-right: 10rpx;
		}
		.time {
			display: inline-flex;
			margin-left: 10rpx;
			font-size: 26rpx;
		}
		.number {
			margin-left: auto;
			color: #fff;
		}
	}
}

.main {
	height: 100%;
	background: #fff;
	border-radius: 50rpx 0 0 0;
	padding-top: 60rpx;
	margin-top: 20rpx;
	overflow: auto;
	padding-bottom: 200rpx;
	.number {
		color: #808281;
		font-size: 31rpx;
		.span {
			color: $color;
			font-size: 160%;
			display: inline-block;
			vertical-align: -5rpx;
		}
	}
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #f9f9f9;
	color: #959595;
	text-align: center;
	height: 110rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: content-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.answer-card {
		position: absolute;
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		background: $color;
		color: #fff;
		font-size: 24rpx;
		bottom: 20rpx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 2;
		.image {
			width: 42rpx;
			height: 42rpx;
			display: block;
			margin: auto;
			margin-top: 30rpx;
			margin-bottom: 10rpx;
		}
	}
	.button {
		width: 45%;
		height: 100%;
		background: transparent;
		box-shadow: none;
		color: inherit;
	}
}
.popup-answer-card {
	padding-inline: 20rpx;
	padding-bottom: 50rpx;
}
</style>
